<template>
    <div>
        <el-table
                :data="students"
                style="width: 100%">
            <el-table-column
                    label="ID"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.stuId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="学号"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.stuNo }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="姓名"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.stuName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="年龄"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.stuAge }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="性别"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.stuGender }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="地址"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.stuAddress }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="类型"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.studentType.typeName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="照片"
                    width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.stuPicture }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="showStudent(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteStudent(scope.row.stuId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <button v-for="i in pages" v-on:click="loadStudents(i)">{{i}}</button>
        <hr>
        学号：<input type="text" v-model="student.stuNo"><br>
        姓名：<input type="text" v-model="student.stuName"><br>
        年龄：<input type="text" v-model="student.stuAge"><br>
        性别：<input type="text" v-model="student.stuGender"><br>
        地址：<input type="text" v-model="student.stuAddress"><br>
        类型：<input type="text" v-model="student.stuTypeId"><br>
        照片：<input type="text" v-model="student.stuPicture"><br>
        <button v-on:click="saveStudent">保存</button>
    </div>
</template>

<script>
    export default {
        name: "StudentView",
        data(){
            return {
                students:null,   //学生集合
                current:1,       //当前页数
                size:5,          //分页长度
                pages:0,          //分页数量
                student:{        //当前学生
                    stuId:0,
                    stuNo:"",
                    stuName:"",
                    stuAge:"",
                    stuAddress:"",
                    stuGender:"",
                    stuTypeId:"",
                    stuPicture:""
                }
            }
        },
        methods:{
            //分页查询
            loadStudents(current){
                this.current = current;
                //axios调用分页查询接口
                this.axios.get("students-page?current=" + this.current +"&size="+this.size)
                    .then(result => {  //请求成功的回调
                        console.log(result);
                        this.students = result.data.data.records;
                        this.pages = result.data.data.pages;
                    })
            },
            //删除
            deleteStudent(id){
                this.axios.delete("student/"+id)
                    .then(result =>{
                        console.log(result.data);
                        if(result.data.code == 200){
                            this.loadStudents(this.current);
                        }
                    });
            },
            //显示学生
            showStudent(student){
                this.student = JSON.parse(JSON.stringify(student));
            },
            //保存学生
            saveStudent(){
                //通过学生id是否是0，判断添加还是更新
                if(this.student.stuId == 0){
                    //添加
                    this.axios.post("student", this.student)
                        .then(result => {
                            console.log(result.data);
                            if(result.data.code == 200){
                                this.loadStudents(this.current);
                            }
                        })
                }else{
                    //更新
                    this.axios.put("student", this.student)
                        .then(result => {
                            console.log(result.data);
                            if(result.data.code == 200){
                                this.loadStudents(this.current);
                            }
                        })
                }
                this.student = {
                    stuId:0,
                    stuNo:"",
                    stuName:"",
                    stuAge:"",
                    stuAddress:"",
                    stuGender:"",
                    stuTypeId:"",
                    stuPicture:""
                };
            }
        },
        mounted() {
            this.loadStudents(1);
        }
    }
</script>

<style scoped>

</style>
